<template>
  <div>
    <Row class="search-info-style">
      <Col span="6">
        <span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
            <Input v-model="searchInfo.name" placeholder="" style="width: 70%" />
      </Col>
      <Col span="6">
        <span>联系方式：</span>
          <Input v-model="searchInfo.phone" placeholder="" style="width: 70%" />
      </Col>
      <Col span="6">
        <span>已办事项：</span>
          <Select clearable v-model="searchInfo.item_id" filterable style="width: 70%">
            <Option :disabled="infodisabled"  v-for="item in itemList" :value="item.ITEM_CODE" :key="item.ITEM_CODE">{{ item.QL_NAME }}</Option>
          </Select>
      </Col>
        <Button @click="searchData()" class="new-btn-sty" type="primary" >
          <Icon type="ios-search" /> 搜索
        </Button>
        <Button class="new-btn-sty" type="primary" @click="addInfo()">
          <Icon type="md-add" />新增</Button>
    </Row>
    <Table border :columns="columns" :data="dataList">
<!--      <template #state="{ row }">-->
<!--        <strong v-if="row.state === '0'">待处理</strong>-->
<!--        <strong v-if="row.state === '1'">处理完成</strong>-->
<!--      </template>-->
      <template #action="{ row }">
        <Button type="primary" size="small" style="margin-right: 5px" @click="showInfo(row)">查看</Button>
        <Button v-if="row.state === '0'" type="warning" size="small" style="margin-right: 5px" @click="updateInfo(row)">编辑</Button>
<!--        <Button v-if="row.state === '0'" type="success" size="small" style="margin-right: 5px" @click="finishInfo(row)">完成</Button>-->
        <Button v-if="row.state === '0'" type="error" size="small" @click="remove(row)">删除</Button>
      </template>
    </Table>
    <Page class="page_style" :total="searchInfo.totalnum" :current="searchInfo.currentPageNo"
          :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total  show-sizer @on-page-size-change="size"/>
    <Modal
      title="工作台账"
      v-model="show"
      @on-cancel="show === false"
      @on-ok="updateOk">
      <div style="text-align: center">
        <row class="search-info-style">
         <Col>
            <span>姓&ensp;&ensp;&ensp;&ensp;名：</span>
            <Input :disabled="infodisabled" v-model="paramData.name" placeholder="" style="width: 70%" />
         </Col>
        </row>
        <row class="search-info-style">
         <Col>
            <span>联系方式：</span>
            <Input :disabled="infodisabled" v-model="paramData.mobile" placeholder="" style="width: 70%" />
         </Col>
        </row>
        <Row class="search-info-style">
          <Col span="24">
            <span>已办事项：</span>
            <Input disabled v-if="infodisabled" v-model="paramData.title" style="width:70%" />
            <Select v-if="!infodisabled" v-model="paramData.item_id" filterable style="width: 70%">
              <Option v-for="item in itemList" :value="item.ITEM_CODE" :key="item.ITEM_CODE">{{ item.QL_NAME }}</Option>
            </Select>
          </Col>
        </Row>
        <Row class="search-info-style">
          <Col span="24">
            <span>事项内容：</span>
            <Input type="textarea" :disabled="infodisabled" v-model="paramData.content" placeholder="事项内容" style="width:70%" />
          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>
<script>
import { findNoteBookList, saveNoteBook, getItemList } from '@/api/eventlist'
export default {
  data () {
    return {
      infodisabled: false,
      paramData: {},
      show: false,
      itemList: [],
      columns: [
        { title: '序号', type: 'index', key: 'index', width: 100, align: 'center' },
        { title: '姓名', key: 'name', align: 'center' },
        { title: '联系方式', key: 'phone', align: 'center' },
        { title: '已办事项', key: 'title', align: 'center' },
        { title: '事项内容', key: 'content', align: 'center' },
        { title: '办理时间', key: 'create_time', align: 'center' },
        // { title: '完成时间', key: 'complete_time', align: 'center' },
        // { title: '状态', slot: 'state', align: 'center' },
        { title: '操作', slot: 'action', width: 250, align: 'center' }
      ],
      dataList: [],
      searchInfo: {
        totalnum: 0,
        currentPageNo: 1,
        currentPageSize: 10,
        code: ''
      }
    }
  },
  methods: {
    init () {
      let param = {
        pageNo: this.searchInfo.currentPageNo,
        pageSize: this.searchInfo.currentPageSize,
        name: this.searchInfo.name,
        mobile: this.searchInfo.mobile,
        item_id: this.searchInfo.item_id
        // title: data2str(this.paramData.title)
      }
      findNoteBookList(param).then(res => {
        if (res.data.errcode === 0) {
          this.dataList = res.data.data.results
          this.searchInfo.totalnum = res.data.data.totalRecord
        } else {
          this.$Notice.error({ title: '获取列表失败', desc: res.data.errmsg })
        }
      })
    },
    searchData () {
      if (this.paramData.title) {
        console.log('222d')
      }
      console.log(this.searchInfo)
      this.changePageNo(1)
    },
    showInfo (item) {
      this.paramData = this.$common.xeUtils.clone(item, true)
      this.paramData.mobile = this.paramData.phone
      this.show = true
      this.infodisabled = true
    },
    updateInfo (item) {
      this.paramData = this.$common.xeUtils.clone(item, true)
      this.paramData.mobile = this.paramData.phone
      this.show = true
      this.infodisabled = false
    },
    addInfo () {
      this.paramData = {}
      this.show = true
      this.infodisabled = false
    },
    finishInfo (item) {
      if (confirm('是否完成此待办事项，完成后不可修改')) {
        this.updateState(item, '1')
      }
    },
    remove (item) {
      if (confirm('是否删除此待办事项，删除后不可恢复')) {
        this.updateState(item, '2')
      }
    },
    updateOk () {
      this.updateState(this.paramData, '0')
    },
    updateState (item, state) {
      if (item.state === '1') {
        return
      }
      item.noteState = state
      this.itemList.forEach(function (temp) {
        if (temp.ITEM_CODE === item.item_id) {
          item.title = temp.QL_NAME
        }
      })
      if (item.phone) {
        item.mobile = item.phone
      }
      saveNoteBook(item).then(res => {
        if (res.data.errcode === 0) {
          this.changePageNo(1)
          this.$Notice.success({ title: '操作完成', desc: '' })
        } else {
          this.$Notice.error({ title: '操作失败', desc: res.data.errmsg })
        }
      })
    },
    getItemList () {
      getItemList().then(res => {
        if (res.data.errcode === 0) {
          this.itemList = res.data.data
        } else {
          this.$Notice.error({ title: '获取事项信息失败', desc: res.data.errmsg })
        }
      })
    },
    size (pageSize) {
      this.searchInfo.currentPageSize = pageSize
      this.changePageNo(1)
    },
    changePageNo (pageNo) {
      this.searchInfo.currentPageNo = pageNo
      this.init()
    }
  },
  mounted () {
    this.init()
    this.getItemList()
  }
}
</script>
<style>
.page_style {
  margin-top: 10px;
  text-align: right;
}
.search-info-style {
  margin: 10px;
}
.new-btn-sty {
  margin-right: 5px;
  color: #fff;
  background-color: #235CA7;
  border-color: #235CA7;
  font-weight: 500;
}
</style>
